<template>
  <div ref="echarts" :style="{ width: width,height: height }"></div>
</template>

<script>
import { myMixin } from '../../mixin/mixin';
export default {
  mixins: [ myMixin ],
  props: {
    width: {
      typeof: String,
    },
    height: {
      typeof: String,
    },
    dataSeries: {   // 区域数据 - 1
      type: Array,
      default() {
        return []
      }
    },
    dateX: {  // x 轴
      type: Array,
      default() {
        return []
      }
    }
  },
  watch: {
     dateX: {
      handler(newval, oldval) {
        if(newval) {
          this.initChart()
        }
        return newval
      },
      deep: true
    },
    dataSeries: {
      handler(newval, oldval) {
        if(newval) {
          this.initChart()
        }
        return newval
      },
      deep: true
    },
  },
  mounted() {
    var _this = this;
    _this.$nextTick( () => {
      _this.initChart();
    })
    // window.onresize = function () {
    //   _this.charts.resize();
    // };
    window.addEventListener( 'resize' , function () {
      _this.charts.resize();
    })
  },
  methods: {
    initChart(){
      if(this.charts != null && this.charts != '' && this.charts != undefined) {
        this.charts.dispose();
      }
      this.charts = this.echarts.init(this.$refs.echarts);
      this.charts.on("click", this.eConsole);
      let base = +new Date(2020,11,1);
      let oneDay = 24 * 3600 * 1000;
      let date = [];
      let data = [Math.random() * 300];
      for (let i = 1; i < 365; i++) {
        var now = new Date((base += oneDay));
        date.push([now.getFullYear(), now.getMonth(), now.getDate() - 1].join('/'));
        data.push(Math.round((Math.random() - 0.5) * 20 + data[i - 1]));
      }
      this.charts.setOption({
        tooltip: {
          trigger: 'axis',
        },
        // 网格
	      grid: {
          x: 40,
          y: 20,
          x2: 20,
          y2: 25,
        },
        title: {
          left: 'center',
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.dateX
        },
        yAxis: {
          type: 'value',
        },
        dataZoom: [
          {
            type: 'inside',
            start: 0,
            end: 100
          },
        ],
        series: [
          {
            name: '用户学习次数',
            type: 'line',
            data: this.dataSeries
          }
        ]
      })
      window.onresize = this.charts.resize;
    }
  }
}
</script>

<style scoped> </style>